<template>
	<div class="wbcolor">
		<div class="item" @click="setcolor('#FF0000')">
			<div class="icon red"></div>
		</div>
		<div class="item" @click="setcolor('#FFCC00')">
			<div class="icon yellow"></div>
		</div>
		<div class="item" @click="setcolor('#4C51FD')">
			<div class="icon blue"></div>
		</div>
		<div class="item" @click="setcolor('#06FC00')">
			<div class="icon green"></div>
		</div>
		<div class="item" @click="setcolor('#FFFFFF')">
			<div class="icon white"></div>
		</div>
		<div class="item" @click="setcolor('#000000')">
			<div class="icon black"></div>
		</div>
	</div>
</template>

<script>
import message from '../../static/js/message';
export default {
	name: 'Wbcolor',
	methods: {
		setcolor(color) {
			message.$emit('setcolor', color);
		}
	}
};
</script>

<style scoped>
.wbcolor {
	width: 240px;
	height: 38px;
	background: rgba(50, 55, 73, 1);
	border: 1px solid rgba(27, 29, 38, 1);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.item {
	width: 16%;
	height: 100%;
}

.item:hover {
	background: rgba(0, 0, 0, 1);
	opacity: 0.8;
}

.icon {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	margin: 0 auto;
	margin-top: 12px;
}

.red {
	background: rgba(255, 0, 0, 1);
}

.yellow {
	background: rgba(255, 204, 0, 1);
}

.blue {
	background: rgba(76, 81, 253, 1);
}

.green {
	background: rgba(6, 252, 0, 1);
}

.white {
	background: rgba(255, 255, 255, 1);
}

.black {
	background: rgba(0, 0, 0, 1);
}
</style>
